<template>
    <el-dialog :title="Id == undefined ? '新增备份' : '修改备份'" :visible.sync="deitOpen" width="60%"
        :before-close="closeDelDialog" :modal-append-to-body="false">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="Id != undefined">
            <el-tab-pane label="神 通" name="BFST" :disabled="addForm.bakAutoId == 'BFST' ? false : true"></el-tab-pane>
            <el-tab-pane label="达 梦" name="BFDM" :disabled="addForm.bakAutoId == 'BFDM' ? false : true"></el-tab-pane>
            <el-tab-pane label="金 仓" name="BFJC" :disabled="addForm.bakAutoId == 'BFJC' ? false : true"></el-tab-pane>
            <el-tab-pane label="瀚 高" name="BFHG" :disabled="addForm.bakAutoId == 'BFHG' ? false : true"></el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
            <el-tab-pane label="神 通" name="BFST"></el-tab-pane>
            <el-tab-pane label="达 梦" name="BFDM"></el-tab-pane>
            <el-tab-pane label="金 仓" name="BFJC"></el-tab-pane>
            <el-tab-pane label="瀚 高" name="BFHG"></el-tab-pane>
        </el-tabs>
        <el-form ref="addForm" :model="addForm" :rules="rules" label-width="140px" style="margin:20px 20px 0">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="备份名称" prop="bakName">
                        <el-input v-model="addForm.bakName" placeholder="请输入备份名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备份方式" prop="bakMode">
                        <el-select v-model="addForm.bakMode" placeholder="请选择备份方式" clearable style="width: 100%">
                            <el-option v-for="item in bakModeList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="自动备份标识" prop="bakAutoId">
                        <el-input v-model="addForm.bakAutoId" placeholder="请输入自动备份标识" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备份类型" prop="bakType">
                        <el-select v-model="addForm.bakType" placeholder="请选择备份类型" clearable style="width: 100%">
                            <el-option v-for="item in bakTypeList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="指定备份的文件目录" prop="bakFile">
                        <el-input v-model="addForm.bakFile" placeholder="请输入指定备份的文件目录"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备份文件名" prop="bakFileName">
                        <el-input v-model="addForm.bakFileName" placeholder="请输入备份文件名"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="ip地址" prop="bakIp">
                        <el-input v-model="addForm.bakIp" placeholder="请输入ip地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="端口号" prop="bakDatabasePort">
                        <el-input v-model="addForm.bakDatabasePort" placeholder="请输入端口号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="数据库名称" prop="bakDatabase">
                        <el-input v-model="addForm.bakDatabase" placeholder="请输入数据库名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库模式" prop="databaseSchema">
                        <el-input v-model="addForm.databaseSchema" placeholder="请输入数据库模式"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户名" prop="bakDataUsername">
                        <el-input v-model="addForm.bakDataUsername" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="bakDataPassword">
                        <el-input v-model="addForm.bakDataPassword" placeholder="请输入密码" show-password
                            auto-complete="new-password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="" @click="testhrefTap">测试链接</el-button>
            <el-button type="primary" @click="submitForm('addForm')">备 份</el-button>
            <el-button @click="closeDelDialog">取 消</el-button>
        </div>

    </el-dialog>
</template>
<script>
import { addBackItem, dabackDetail, editItem ,checkConn} from "@/api/cqbc/backupRestore/databaseManagement.js"
export default {
    watch: {
        Id: {
            handler(val) {
                if (val != undefined) { //修改
                    dabackDetail(val).then(res => {
                        this.addForm = res.data
                        this.activeName = res.data.bakAutoId;
                        this.addForm['bakMode'] = res.data.bakMode.toString();
                        this.addForm['bakType'] = res.data.bakType.toString();
                    })
                }
            },
            immediate: true
        }
    },
    props: ["deitOpen", "Id"],
    components: {

    },
    data() {
        return {
            activeName: "BFST",
            addForm: {
                bakName: undefined,
                bakMode: undefined,
                bakAutoId: "BFST",
                bakType: undefined,
                bakFile: undefined,
                bakFileName: undefined,
                bakIp: undefined,
                bakDatabasePort: undefined,
                bakDatabase: undefined,
                databaseSchema: undefined,
                bakDataUsername: undefined,
                bakDataPassword: undefined
            },
            rules: {
                bakIp: [
                    { required: true, message: "请输入IP地址", trigger: "blur" }
                ],
                bakDatabasePort: [
                    { required: true, message: "请输入端口号", trigger: "blur" }
                ],
                bakDatabase: [
                    { required: true, message: "请输入数据库名称", trigger: "blur" }
                ],
                databaseSchema: [
                    { required: true, message: "请输入数据库模式", trigger: "blur" }
                ],
                bakDataUsername: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ],
                bakDataPassword: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
            },
            bakModeList: [ //备份方式 0：自行备份 1手动备份
                {
                    value: "1",
                    label: "自行备份"
                }, {
                    value: "0",
                    label: "手动备份"
                }
            ],
            bakTypeList: [
                {
                    value: "1",   //备份类型  1表 0模式
                    label: "表"
                }, {
                    value: "0",
                    label: "模式"
                }
            ]
        }
    },
    created() {

    },
    methods: {
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },
        submitForm(addForm) {

            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    if (this.Id == undefined) {
                        addBackItem(this.addForm).then(res => {
                            if (res.code == "200") {
                                this.$modal.msgSuccess("备份成功");
                                this.$emit("addsubmitForm")
                            }
                        })
                    } else {
                        editItem(this.addForm).then(res => {
                            if (res.code == "200") {
                                this.$modal.msgSuccess("备份修改成功");
                                this.$emit("addsubmitForm")
                            }
                        })

                    }

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //测试链接
        testhrefTap(){
            this.$modal.loading("加载中...")
          //  0：神通 1达梦 2金仓 3瀚高
            var dataBaseType="";
            switch(this.addForm.bakAutoId){
                case "BFST":
                dataBaseType=0;
                break;
                case "BFDM":
                dataBaseType=1;
                break;
                case "BFJC":
                dataBaseType=2;
                break;
                case "BFHG":
                dataBaseType=3;
                break;
                default:
                    break;
            }

            var data={
                 bakIp:this.addForm.bakIp,
                 bakDatabasePort:this.addForm.bakDatabasePort,
                 bakDatabase: this.addForm.bakDatabase,
                 bakDatabaseUserName: this.addForm.bakDataUsername,
                 bakDatabasePassword: this.addForm.bakDataPassword,
                 dataBaseType:dataBaseType
            }
            checkConn(data).then(res=>{
                console.log(res)
                if(res.code=="200"){
                    this.$modal.closeLoading()

                }
                this.$modal.msgSuccess("测试链接成功")
            }).catch(() => {  this.$modal.closeLoading()});
        },
        //tab切换
        handleClick(val) {
            var that = this;
            that.addForm["bakAutoId"] = val.name;
        }

    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}
</style>

